<template>
    <div class="mine-order bs">
        <div class="mine-order-title">
            <text class="mine-order-title-left">送货单</text>
            <div class="mine-order-title-more" @click="orderClick('payment')">
                <text class="mine-order-header-title">查看更多送货单</text>
                <text class="mine-order-arrow">&#xe61f;</text>
            </div>
        </div>
        <div class="mine-order-info">
            <div class="mine-order-unpaid" @click="orderClick('payment')">
                <text class="mine-order-icon">&#xe61d;</text>
                <text class="mine-order-item-title">待配送</text>
                <text class="mine-order-num totalColor" v-if="unpaid > 0">{{showUnpaid}}</text>
            </div>
            <div class="mine-order-unpaid" @click="orderClick('delivery')">
                <text class="mine-order-icon" style="font-weight: 500">&#xe61c;</text>
                <text class="mine-order-item-title">配送中</text>
                <text class="mine-order-num totalColor" v-if="unshipping > 0">{{showUnshipping}}</text>
            </div>
            <div class="mine-order-unpaid" @click="orderClick('received')">
                <text class="mine-order-icon" style="font-weight: 500">&#xe66a;</text>
                <text class="mine-order-item-title">已配送</text>
                <text class="mine-order-num totalColor" v-if="shipped > 0">{{showShipped}}</text>
            </div>
            <div class="mine-order-unpaid" @click="orderClick('complete')">
                <text class="mine-order-icon">&#xe641;</text>
                <text class="mine-order-item-title">已完成</text>
            </div>
            <div class="mine-order-unpaid" @click="returnsClick">
                <text class="mine-order-icon">&#xe626;</text>
                <text class="mine-order-item-title">退货单</text>
                <text class="mine-order-num totalColor" v-if="returnTotal > 0">{{showReturnTotal}}</text>
            </div>
        </div>
    </div>
</template>

<script>
    import {summary} from '@/api/shipping.js'
    import {summary as returnSummary} from '@/api/return.js'
    export default {
        data(){
            return{
                shipped:0,
                unshipping:0,
                unpaid:0,
                showShipped:0,
                showUnshipping:0,
                showUnpaid:0,
                returnTotal:0,
                showReturnTotal:0
            }
        },
        created(){
            this.initIconFont()
            if (this.getGlobalData().token != null){
                this.summaryClick()
                this.returnSummaryClick()
            }
        },
        props:[
            'time'
        ],
        watch:{
            time(val, oldVal){//普通的watch监听
                var _this = this
                if (_this.getGlobalData().token != null){
                    _this.summaryClick()
                    _this.returnSummaryClick()
                }
            },

        },
        methods:{
            orderClick(type){
                var _this = this
                if (this.getGlobalData().token == null) {
                    this.loginClick()
                    return;

                }
                eeui.openPage({
                    url: 'root://pages/order/shippingList.js',
                    statusBarType: 'immersion',
                    statusBarStyle: false,
                    params:type
                }, result => {
                    if (result.status == 'stop')  {
                        _this.summaryClick()
                        _this.returnSummaryClick()
                    }
                });
            },
            returnsClick(){
				if(this.checkPermission(['return.query'])==false){
					eeui.alert('您没有退货权限', function() {

					});
                    return
				}
                var _this = this
                if (this.getGlobalData().token == null) {
                    this.loginClick()
                    return;

                }
                eeui.openPage({
                    url: 'root://pages/returns/index.js',
                    statusBarType: 'immersion',
                    statusBarStyle: false,
                }, result => {
                    if (result.status == 'stop')  {
                        _this.summaryClick()
                        _this.returnSummaryClick()
                    }
                });
            },
            summaryClick() {
                summary().then(
                    res => {
                        this.shipped = res.data.receiver;
                        this.unshipping = res.data.shipping;
                        this.unpaid = res.data.confirmed;
                        this.showShipped = res.data.receiver > 99 ? '...' : res.data.receiver;
                        this.showUnshipping = res.data.shipping > 99 ? '...' : res.data.shipping;
                        this.showUnpaid = res.data.confirmed > 99 ? '...' : res.data.confirmed;

                    }
                ).catch(error => {
                    console.log(error)
                })
            },
            returnSummaryClick(){
                returnSummary().then(
                    res => {
                        console.log('退货')
                        console.log(res)
                        var unconfirm =0
                        var confirmed = 0
                        if(res.data.unconfirm != undefined){
                            unconfirm = res.data.unconfirm
                        }
                        if(res.data.confirmed != undefined){
                            confirmed = res.data.confirmed
                        }
                        this.returnTotal = unconfirm+confirmed
                        this.showReturnTotal =  this.returnTotal > 99 ? '...' :  this.returnTotal
                    }
                ).catch(error => {
                    console.log(error)
                })
            },
            refreshNumberClick(){
                this.$emit('refreshNumber');
            },
            loginClick() {
                var _this = this
                eeui.openPage({
                    url: 'root://pages/login/msgLogin.js',
                    statusBarType: 'immersion',
                    statusBarStyle: false
                }, result => {
                    if (result.status == 'stop') {
                        _this.refreshNumberClick()
                    }
                });
            },
        }
    }
</script>

<style scoped>
    .mine-order {
        margin: 30px 30px 0;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 10px;
    }

    .mine-order-title {
        font-size: 30px;
        position: relative;
        line-height: 80px;
        border-bottom-color: rgba(231, 233, 237, 0.5);
        border-bottom-width: 1px;
        border-bottom-style: solid;
        padding: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .mine-order-title-more {
        font-size: 25px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        opacity: 0.5;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .mine-order-arrow {
        font-family: iconfont2;
        color: rgba(0,0,0,0.5);
        font-size: 22px;
    }

    .mine-order-title-more text {
        display: block;
    }

    .mine-order-info {
        display: flex;
        align-items: center;
        font-size: 25px;
        flex-direction: row;
        font-weight: 400;
        padding: 20px 0;
    }

    .mine-order-icon {
        display: inline-block;
        font-size: 60px;
        color: rgba(0, 0, 0, 0.6);
        font-family: iconfont2;
    }

    .mine-order-num {
        position: absolute;
        right: 33px;
        top: 0px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-size: 20px;
        line-height: 30px;
        text-align: center;
        color: #fff;
        /* background-color: #f77211; */
    }

    .mine-order-unpaid {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        flex: 1;
    }

    .mine-order-notdelivere {
        position: relative;
        text-align: center;
        flex-grow: 1;
    }

    .mine-order-delivered {
        position: relative;
        text-align: center;
        flex-grow: 1;
    }

    .mine-order-evaluate {
        position: relative;
        text-align: center;
        flex-grow: 1;
    }

    .mine-order-refund {
        position: relative;
        text-align: center;
        flex-grow: 1;
    }
    .mine-order-header-title{
        font-size: 24px;
    }
    .mine-order-title-left{
        font-size: 26px;
    }
    .mine-order-item-title{
        font-size: 24px;
        margin-top: 10px;
        color: rgba(0, 0, 0, 0.8);
    }
    /* 小圆点 */
    .totalColor{
        background-color: #fc5157
    }
</style>
